<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蔡艺婷</title>
    <link rel="stylesheet" href="./css/style01.css">
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/index01.css">
    <!-- 2.改title的标题 -->
</head>
<body>
    <!-- 1. "!"回车/tab键快速生成代码 -->
    <!-- 3.body里面写内容 
        主要内容是在body里面写的 
    --> 
    <!-- 一个图片+4个无序列表 -->
     <header>
        <div class="container"></div>
        <div class="logo">
            <!-- 拖住图片放到代码中，按住shift插入代码的任意位置 -->
            <img src="img/logo_white.png" alt="">
        </div>
        <!-- ul是无序列表 -->
        <ul>
            <!-- _blank:新窗口,_self:自窗口 -->
            <li class="actived"><a href="index01.html" target=_self>首页</a></li>
            <li><a href="case01.html" target=_self>最新案例</a></li>
            <li><a href="about01.html" target=_self>关于我们</a></li>
            <li><a href="concat01.html" target=_self>联系我们</a></li>
        </ul>
        <div class="clear">

            <!-- .clear  div.clear -->
        </div>
    
     </header>
    <div class="banner">
        <div class="main-text">
            <!-- .+类名 --><!-- #+id名 -->
            <h1><!-- h1包含大标题 -->独具匠心 专注品质</h1>
                 <span>
                    <!-- lorem/lorem30:生成随机乱序的30个字母 -->
                    <!-- 乱数假文 -->
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ducimus ullam similique vel? Et ea eos perferendis ducimus laudantium vero rerum odit asperiores dolores, unde quod vel qui, fuga impedit.
                    <!-- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem inventore dolorem consequatur et, neque delectus assumenda temporibus quaerat quo dignissimos eveniet est atque voluptates quasi minima beatae. Magni, quis a. -->
                    <!-- 1. lorem
                        用法1:lorem 回车
                        效果:自动生成 30 个单词
                        用法2:lorem+n
                        效果:指定生成单词个数
                        用法3:.dlorem*n
                        效果:指定生成多行文本:用法4:loremn'm效果:指定生成多行文本，每行几个单词
                     -->
                 </span>
        </div>
    </div>
  
    <div class="container features">
            <div class="feature">
                <div class="center icon">
                    <!-- 图标 -->
                    <i class="fas fa-briefcase fa-5x"></i>
                </div>
                <div class="title-big">
                    效果酷炫
                </div>
        
                <div class="title-small">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit provident, illo quo at non repellat
                    id sunt unde minus commodi fuga voluptatum quibusdam eveniet fugit veniam veritatis earum porro fugiat in
                    quasi sint voluptas magnam ipsam harum? Totam, rerum eos.
                </div>
            </div>
        
            <div class="feature">
                <div class="center icon">
                    <!-- 图标 -->
                    <i class="fas fa-archive fa-5x"></i>
                </div>
                <div class="title-big">
                    效果酷炫
                </div>
        
                <div class="title-small">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit provident, illo quo at non repellat
                    id sunt unde minus commodi fuga voluptatum quibusdam eveniet fugit veniam veritatis earum porro fugiat in
                    quasi sint voluptas magnam ipsam harum? Totam, rerum eos.
                </div>
            </div>
        
            <div class="feature">
                <div class="center icon">
                    <!-- 图标 -->
                    <i class="fa fa-arrow-circle-right fa-5x" aria-hidden="true"></i>
                </div>
                <div class="title-big">
                    效果酷炫
                </div>
        
                <div class="title-small">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit provident, illo quo at non repellat
                    id sunt unde minus commodi fuga voluptatum quibusdam eveniet fugit veniam veritatis earum porro fugiat in
                    quasi sint voluptas magnam ipsam harum? Totam, rerum eos.
                </div>
            </div>
        
            <div class="clear"></div>
    </div>

    <div class="container lists">
        <div class="title">
            与HTML为伴
        </div>

     <div class="pic-lists">
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
            <div class="pic-desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, dolor!
            </div>
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
            <div class="pic-desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, dolor!
            </div>
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
            <div class="pic-desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, dolor!
            </div>
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
            <div class="pic-desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, dolor!
            </div>
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
            <div class="pic-desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, dolor!
            </div>
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
            <div class="pic-desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, dolor!
            </div>
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
            <div class="pic-desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, dolor!
            </div>
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
            <div class="pic-desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, dolor!
            </div>
        </div>
     </div>
    </div>

    <div class="contact">
        <div class="container">
            <div class="title">联系我们</div>
            <!-- qrcode:二维码 -->
            <div class="qrcode">
            <img src="img/qrcode.jpg" alt="公众号二维码" width="120">
            <div class="center">
                关注公众号
            </div>
            </div>
            <div class="qrcode">
             <img src="img/qrcode.jpg" alt="公众号二维码" width="120">
                <div class="center">
                 下载APP
                </div>
            </div>
            <div class="info-box">
                  <div class="line">
                 <span class="line-title">
                     QQ:
               </span>
            <span>
                2222XXXX22
            </span>
        </div>
        <div class="line">
            <span class="line-title">
                邮箱:
            </span>
            <span>
                XXXX@qq.com
            </span>
        </div>
        <div class="line">
            <span class="line-title">
                微博:
            </span>
            <span>
                XXXX
            </span>
        </div>
        <div class="line">
            <span class="line-title">
                地址:
            </span>
            <span>
                山东省青岛市xx区xx路2号
            </span>
        </div>
            </div>
            <div class="phone">
                <i class="fas fa-phone-volume fa-3x">
                </i>
                <span>
                        0591-88XXXX888
                        <!-- span不能修改宽高 -->
                    </span>
            </div>
        <div class="clear"></div>
    </div>
    <!-- 页脚:用于定义文章的页脚 -->
    </div>
    <footer class="center">
    <!-- center 居中属性 -->
    Copyright &copy; 2024XXXXX公司版权所有
    </footer>
</body>
</html>
